//菜单：账号操作组件
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

import MenuBarMenu from './menu-bar-menu.jsx';
import {MenuSection} from '../menu/menu.jsx';
import MenuItemContainer from '../../containers/menu-item.jsx';
import UserAvatar from './user-avatar.jsx';
import dropdownCaret from './dropdown-caret.svg';

import styles from './account-nav.css';

const AccountNavComponent = ({
    menuBarMenuClassName,
    className,
    isOpen,
    
    avatar,//头像
    nickname,//昵称

    onClick,
    onClose,
    onLogOut,
}) => (
    <React.Fragment>
        <div
            className={classNames(
                styles.userInfo,
                className
            )}
            onMouseUp={onClick}
        >
            {avatar ? (
                <UserAvatar
                    className={styles.avatar}
                    imageUrl={avatar}
                />
            ) : null}
            <span className={styles.profileName}>
                {nickname}
            </span>
            <div className={styles.dropdownCaretPosition}>
                <img
                    className={styles.dropdownCaretIcon}
                    src={dropdownCaret}
                />
            </div>
        </div>
        <MenuBarMenu
            className={menuBarMenuClassName}
            open={isOpen}
            place='left'
            onRequestClose={onClose}
        >
            <MenuItemContainer href="/my" target="_blank">学习中心</MenuItemContainer>
            <MenuSection>
                <MenuItemContainer onClick={onLogOut}>退出</MenuItemContainer>
            </MenuSection>
        </MenuBarMenu>
    </React.Fragment>
);

AccountNavComponent.propTypes = {
    menuBarMenuClassName: PropTypes.string,
    className: PropTypes.string,
    isOpen: PropTypes.bool,
    
    avatar: PropTypes.string,
    nickname: PropTypes.string,

    onClick: PropTypes.func,
    onClose: PropTypes.func,
    onLogOut: PropTypes.func,
};

export default AccountNavComponent;
